<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>当当图书榜</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.div header {
				width: 1300px;
				height: 90px;
				padding-top: 5px;
				position: relative;
			}
			.div header li{
				list-style: none;
				display: inline-block;
			}
			.div header a{
				color:white;
				text-decoration: none;
			}
			
			.div header #id2 ul{
				width:250px;
				line-height: 30px;
				border: 1px solid #00FFFF;
				border-bottom: none;
				background: #CAEFFE;
				padding-left: 5px;
				padding-right: -2px;
				position: absolute;
				right: 0px;
				top: 15px;
			}
			.div header #id2 #img1{
				position: absolute;
				right: 220px;
				top:5px;
				z-index: 2;
			}
			.div header #id3 ul li{
				font-size: 20px;
				margin-left: 30px;
			}
			.div header #id3 ul{
				background: orange;
				margin-left: 40px;
			}
			.div header #id1{
				margin-left: 40px;
			}
			#sec #id1{
				margin-left: 40px;
			}
			#sec #id1 img{
				width: 1262px;
			}
			#sec #sec1{
				width: 1259px;
				height: 350px;
				border: 2px solid #CAEFFE;
				margin-left: 40px;
				position: relative;
			} 
			#sec #sec1 #id3 ul li{
				list-style: none;
				font-size: 15px;
				line-height: 25px;
				font-family: verdana "宋体";
			}
			#sec #sec1 #id3 ul li:nth-of-type(1){
				color: blue;
			}
			#sec #sec1 #id3 ul{
				width: 340px;
				position: absolute;
				top: 95px;
				left: 255px;
			}
			#sec #sec1 #id3 {
				margin-top: 80px;
			}
			#sec #sec1 #id4{
				position: absolute;
				top: 80px;
				right: 0px;
			}
			#sec #sec1 #id4 #id5{
				margin-top: 3px;
				position: relative;
				width: 540px;
				height: 130px;
			}
			#sec #sec1 #id4 #id5 ul{
				
				position:absolute;
				top: 0px;
				left: 100px;
			}
			#sec #sec1 #id4 #id5 img{
				padding-right: 300px;
			}
			#sec #sec1 #id4 #id6{
				margin-top: 3px;
				position: relative;
				width: 540px;
				height: 130;
			}
			#sec #sec1 #id4 #id6 ul{
				
				position:absolute;
				top: 0px;
				left: 100px;
			}
			#sec #sec1 #id2{
				position: absolute;
				top: 20px;
				left: -10px;
			}
			#sec #sec1  #a{
				position: absolute;
				top:70px;
				left: 20px;
				z-index: 999;
				
			}
			#sec #sec1  #b{
				position:absolute;
				right: 500px;
				top:60px;
				z-index: 999;
				
			}
			#sec #sec1  #c{
				position:absolute;
				right: 505px;
				bottom:110px;
				z-index: 999;
			}
			footer div{
				font-family: verdana "宋体";
				color: grey;
				margin-left: 160px;
				margin-top: 20px;
			}
			footer div span{
				position: relative;
				top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<header>
				<div id="id1">
					<img src="img/logo.jpg" />
				</div>
				<div id="id2">
					<div id="img1">
						<img src="img/icon_count.png" />
					</div>
					<ul>
						<li><a href="#">尾品汇 </a></li>
						<li><a href="#">当当优品 </a></li>
						<li><a href="#">数字馆 </a></li>
						<li><a href="#">都看阅器 </a></li>
					</ul>
				</div>
				
				<div id="id3">
					<ul>
						<li><a href="#">首页 </a></li>
						<li><a href="#">图书 </a></li>
						<li><a href="#">音像  </a></li>
						<li><a href="#">童装 </a></li>
						<li><a href="#">服装  </a></li>
						<li><a href="#">鞋靴 </a></li>
						<li><a href="#">运动 </a></li>
						<li><a href="#">箱包  </a></li>
						<li><a href="#">美妆 </a></li>
						<li><a href="#">珠宝 </a></li>
						<li><a href="#">家居 </a></li>
						<li><a href="#">食品 </a></li>
						<li><a href="#">酒  </a></li>
						<li><a href="#">手机  </a></li>
						<li><a href="#">数码  </a></li>
						<li><a href="#">电脑  </a></li>
						<li><a href="#">家电 </a></li>
					</ul>
				</div>
			</header>
			<section>
				<div id="sec">
					<div id="id1">
						<img src="img/banner.png" />
					</div>
					<div id="sec1">
						<div id="id2">
							<img src="img/bg_bang.gif" />
						</div>
						<div id="a">
									<img src="img/bookNo1.gif"/>
								</div>
								<div id="b">
									<img src="img/bookNo2.gif"/>
								</div>
								<div id="c">
									<img src="img/bookNo3.gif"/>
								</div>
						<div id="id3">
							<img src="img/book-01.jpg" />
							<ul>
								<li>偷影子的人</li>
								<li>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</li>
								<li>出版社：湖南文艺出版社</li>
								<li>当当价：￥ 17.90</li>
								<li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</li>
							</ul>
							<div id="id4">
								<div id="id5">
									<img src="img/book-02.jpg"/>
									<ul>
										<li>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </li>
										<li>作 者：柴静 著</li>
										<li>出版社：广西师范大学出版社</li>
										<li>￥ 29.40&nbsp;  7.4折</li>
									</ul>
								</div>
								<div id="id6">
									<img src="img/book-03.jpg"/>
									<ul>
										<li> 改变孩子先改变自己 </li>
										<li>作 者：贾容韬 贾毅 著</li>
										<li>出版社：作家出版社</li>
										<li>￥ 22.20&nbsp;  7.4折</li>
									</ul>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer>
				<div >
					Copyright (C) 当当网 2004-2017, All Rights Reserved<span><img src="img/validate.gif"/></span>京ICP证041189号出版物经营许可证 新出发京批字第直0673号
				</div>
			</footer>
		</div>
		
	</body>
</html>
